<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐进过渡</title>
    <link href="../myCss/trans.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="demo">
    <input type="text" v-model="text">
    <ul>
        <li v-for="list in lists | filterBy text" transition="staggered" stagger="100">{{list.msg}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#demo',
        data: {
            text: '',
            lists: [
                {msg: 'one'},
                {msg: 'two'},
                {msg: 'three'},
                {msg: 'four'}
            ]
        }
    });
</script>
</body>
</html>